<%-- 
    Document   : chitietsanpham
    Created on : Dec 15, 2011, 8:44:48 PM
    Author     : HoangLiem
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<link href="style/body.css" rel="stylesheet" type="text/css" />
<link href="style/product_detail.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript" src="js/tinyfader.js"></script>
<div id="product_name">
    <div id="name">
        <h2>${sanPham.tenSanPham}</h2>
    </div>
</div>
<div id="detail_1">
    <div id="show_image">
        <h2 style="margin-top: 15px" > Pictures Of Product </h2>
        <div id="slideshow">
            <ul id="slides">
                <c:forEach var="hinh" items="${dshinh}" varStatus="dshinh" begin="0" end="${dshinh.size()}" step="1">
                    <li><img src="images/productImages/${hinh.tenHinhAnh}" width="350" height="300" style="margin: 25px; margin-top: 35px;" /></li>
                    </c:forEach>
            </ul>
        </div>
        <ul id="pagination99" class="pagination99">
            <c:forEach var="i" begin="0" end="${dshinh.size() - 1}" step="1">
                <li onclick="slideshow.pos(${i})"><img style="background-color: #666" src="images/productImages/${dshinh[i].tenHinhAnh}" width="66" height="50"/> </li>
                </c:forEach>
        </ul>

    </div>
    <script type="text/javascript">
        var slideshow=new TINY.fader.fade('slideshow',{
            id:'slides',
            auto:6,
            resume:true,
            navid:'pagination99',
            activeclass:'hienhanh',
            visible:true,
            position:0
        });
    </script>
    <div id="bidder_list">
        <div id="cur_winning" class="title">
            Current Winning Bidder(s)
        </div>
        <div class="bidder">
            <c:choose>
                <c:when test="${dsChiTietDauGia.size()!= 0}">
                    <div style="color:red;">${dsChiTietDauGia[0].thanhvien.tenDangNhap}</div>
                </c:when>
            </c:choose>
        </div>
        <div class="horizontal"><hr/></div>
        <div id="top_closing_bid" class="title">
            Top Closing Bid
        </div>
        <c:choose>
            <c:when test="${dsChiTietDauGia.size()!= 0}">
                <c:forEach var="detailbid" items="${dsChiTietDauGia}" varStatus="dsChiTietDauGia" begin="0" end="${dsChiTietDauGia.size()}" step="1">
                    <div class="bidder">
                        <div style="text-align: left;">&nbsp<b>${detailbid.thanhvien.tenDangNhap}</b><div style="text-align: right;">${detailbid.getGiaDauString()},000 VNĐ</div></div>
                        <div style="text-align: left; color: #666; font-size: 12px;">&nbsp ${detailbid.thoiDiemDauGia}</div>
                    </div>
                    <div class="horizontal"><hr/></div>
                    </c:forEach>
                </c:when>
            </c:choose>
    </div>
    <c:choose>
        <c:when test="${sanPham.daysBetween() > 0}">
            <script type="text/javascript">
                $(function () {
                    var austDay = new Date();
                    austDay = new Date(${sanPham.thoiDiemKetThuc.getYear()} + 1900, ${sanPham.thoiDiemKetThuc.getMonth()}, ${sanPham.thoiDiemKetThuc.getDate()}, ${sanPham.thoiDiemKetThuc.getHours()}, ${sanPham.thoiDiemKetThuc.getMinutes()}, ${sanPham.thoiDiemKetThuc.getSeconds()});
                    $('#Countdown2222').countdown({until: austDay, format: 'D', serverSync: function() { return new Date('${dateNow}');} });
                });
            </script>
        </c:when>
        <c:otherwise>
            <script type="text/javascript">
                $(function () {
                    var austDay = new Date();
                    austDay = new Date(${sanPham.thoiDiemKetThuc.getYear()} + 1900, ${sanPham.thoiDiemKetThuc.getMonth()}, ${sanPham.thoiDiemKetThuc.getDate()}, ${sanPham.thoiDiemKetThuc.getHours()}, ${sanPham.thoiDiemKetThuc.getMinutes()}, ${sanPham.thoiDiemKetThuc.getSeconds()});
                    $('#Countdown2222').countdown({until: austDay, format: 'HMS', serverSync: function() { return new Date('${dateNow}');} });
                });
            </script>
        </c:otherwise>
    </c:choose>
    <div id="to_bid">
        <div id="clock" class="to_bid">
            <c:choose>
                <c:when test="${sanPham.daysBetween() < 0}">
                    <h2 id="Countdown2223">AUCTION WAS CLOSED</h2> 
                </c:when>
                <c:otherwise>
                    <h2 id="Countdown2222"></h2>
                </c:otherwise>
            </c:choose>
            <a style="color:#777; font-size: 12px;">Auction Close Time: ${sanPham.thoiDiemKetThuc}</a>
        </div>
        <div class="horizontal"><hr/></div>
        <div id="i_want" class="to_bid">
            <label>I want :</label>
            <select name="stocks" style="width:50px;">
                <option value="1">1</option>
            </select>
        </div>
        <div class="horizontal"><hr/></div>
        <div class="to_bid">
            To Bid Enter ${sanPham.getMyHighestPrice()},000VNĐ or more. 
        </div>
        <div id="bid" class="to_bid">
            <form name="frmBid" id="frmBid" method="post" action="newBid?masp=${sanPham.maSanPham}">
                <input type="textbox" name="valueBid" style="width:50px;"/>,000 VNĐ 
                <input
                    <c:choose>
                        <c:when test="${sanPham.daysBetween() < 0}">
                            disabled="disabled" 
                        </c:when>
                    </c:choose>
                            type="submit" src="images/btn-bid.jpg" name="UpdateBid" value="Place mybid" onclick="return dangNhapHayChua();"/>
            </form>
        </div>
        <div class="horizontal"><hr/></div>
        <div class="to_bid">
            <a href="#">Comment</a>
        </div>       
    </div>
</div>
<div id="detail_2" class="description"><!--big images-->
    <div style="width:100%; height:50px; clear:both;">
        <h4 style="padding:20px;">${sanPham.tenSanPham}</h4>
    </div>
    <div style="width:100%; height:auto; padding-bottom: 50px; padding-top: 50px; clear:both;">
        <img src="images/productImages/${dshinh[0].tenHinhAnh}" />
    </div>
    <div class="horizontal"><hr/></div>
    <div style="width:100%; height:auto; clear:both;">
        <p>
            ${sanPham.moTa}
        </p>
    </div>
</div>
<div id="comment" class="description">
    <h3 style="color:#00C; margin-bottom: 10px; margin-top: 10px;">Discuss ${sanPham.tenSanPham}</h3>
    <div id="fb-root"></div>  
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>  
    <fb:comments href="${currentURL}" width="906"></fb:comments>
</div>
<div id="body_ads" class="description">
    <a target="_blank" href="http://chodientu.vn/pro/43/dau-gia-shock-thu-5.html"><img width="100%" height="100%" src="images/daugiadongho.jpg"/></a>
</div>
